﻿<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Main.aspx.cs" Inherits="web_CategoryMS.Main" %>


<%--新代码--%>

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>左侧导航栏</title>
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<link rel="stylesheet" type="text/css" href="css/page.css" />
		<link href="plugins/css/bootstrap.min.css" rel="stylesheet" type="text/css" />
		<link href="plugins/css/icons.min.css" rel="stylesheet" type="text/css" />
       
	</head>
	<body>
		<div class="page" id="app" >
			<div class="nav-left" v-show="navLeftFlag" ref="navLeft">
				<div class="LogoName">
					需求管理系统
				</div>
				<div class="navDiv">
					<div class="navName">导航 </div>
					<div class="nav-list" runat="server">
						<ul >
							<li class="nav-tab a_active waves-effect">
								<a href="View/G00/FS0001.aspx" class="li-a active" target="myframe"><i class='bx bx-home-smile'></i> 主页
									
								</a>
							</li>

							
							<li class="nav-tab nav-ul">
								<a href="javascript:void[0]" class="li-a" target="myframe"><i class='bx bx-layer'></i> 用户管理
									<i class='bx bx-chevron-right' style="float: right;"></i></a>
								<div class="nav-box">
									<a href="View/G01/FS0101.aspx" class="li-a-a" target="myframe">用户管理</a>
								</div>
							</li>
							<li class="nav-tab nav-ul">
								<a href="javascript:void[0]" class="li-a"><i class='bx bx-cog'></i> 项目管理
									<i class='bx bx-chevron-right' style="float: right;"></i></a>
								<div class="nav-box">
									<a href="View/G01/FS0102.aspx" class="li-a-a" target="myframe">项目管理</a>
								</div>
							</li>
							<li class="nav-tab nav-ul">
								<a href="javascript:void[0]" class="li-a"><i class='bx bx-buildings'></i> 需求管理
									<i class='bx bx-chevron-right' style="float: right;"></i></a>
								<div class="nav-box">
									<a href="View/G01/FS0103.aspx" class="li-a-a" target="myframe">需求管理</a>
								</div>
							</li>
							<li class="nav-tab nav-ul">
								<a href="javascript:void[0]" class="li-a"><i class='bx bx-edit'></i> 订单管理
									<i class='bx bx-chevron-right' style="float: right;"></i></a>
								<div class="nav-box">
									<a href="View/G01/FS0104.aspx" class="li-a-a" target="myframe">订单管理</a>
								</div>
							</li>
						</ul>
					</div>
				</div>
			</div>
			<div class="nav-right" ref="navRight">
				<div class="nav-top">
					<button type="button" class="btn btn-primary btn-sm hiddenBtn" style="line-height: 10px;" @click="isShowLeft">
						<i class="bx bx-grid-alt" style="font-size: 16px;"></i>
                       
					</button>
                     <asp:Label runat="server" ID="lbl_GuanLi" Text="管理员"  ></asp:Label> 
					<!-- <button type="button" class="btn btn-primary btn-sm showBtn" style="line-height: 10px; display: none;" onclick="showNavRight">
						<i class="bx bx-expand" style="font-size: 16px;"></i>
					</button> -->
				</div>
				<div class="content-page" ref="cPage">
					<iframe name="myframe" width="100%" height="100%" frameborder="0" src="View/G00/FS0001.aspx"></iframe>
				</div>
			</div>
		</div>
		<script src="js/vue.min.js"></script>
		<script src="https://www.jq22.com/jquery/jquery-1.10.2.js"></script>
		<script type="text/javascript">

          
            $(function () {
                let navflag = false;
                $('.nav-tab').click(function () {
                    $(this).siblings().each(function () {
                        $(this).removeClass('a_active');
                        // $(this).removeClass('a_active');
                        $(this).find('.nav-box').css('height', '0')
                        //关闭右侧箭头
                        if ($(this).attr('class').indexOf('nav-ul') != -1) {
                            $(this).find('.bx-chevron-right').css('transform', 'rotateZ(0deg)')
                            $(this).find('.bx-chevron-right').css('transition', 'all .5s')
                            $(this).removeClass('nav-show')
                            // $(this).find('div').removeClass('nav-box')
                        }
                    })
                    //当前选中
                    $(this).addClass('a_active')
                    $(this).find('.li-a').addClass('active')
                    // 打开右侧箭头
                    $(this).find('.bx-chevron-right').css('transform', 'rotateZ(90deg)')
                    $(this).find('.bx-chevron-right').css('transition', 'all .5s')
                    $(this).addClass('nav-show')
                    // $(this).find('div').addClass('nav-box')
                })
                /* 二级菜单a点击事件 */
                $(".li-a-a").click(function () {
                    $(".li-a-a").each(function () {
                        $(this).removeClass('active-li-a');
                    })
                    $(this).addClass('active-li-a');
                })

            })
            const vue = new Vue({
                el: '#app',
                data: {
                    navLeftFlag: true
                },
                return:{
                    session: '',
                },
                created() {
                    this.session = json.parse(window.sessionStorage.getItem('sessionObj'))
                },
                methods: {
                    isShowLeft() {

                        if (this.navLeftFlag) {
                            this.$refs.navRight.style.paddingLeft = '0px'
                            this.$refs.cPage.style.left = '0px';
                            this.navLeftFlag = false;
                            // this.$refs.navLeft.style.width = '0px';
                            // setTimeout(()=>{
                            // 	this.navLeftFlag = false;
                            // },200)
                        } else {
                            this.$refs.navRight.style.paddingLeft = '240px';
                            this.$refs.cPage.style.left = '240px';
                            this.navLeftFlag = true;
                            // this.$refs.navLeft.style.width = '240px';
                            // setTimeout(()=>{
                            // 	this.navLeftFlag = true;
                            // },200)
                        }
                       
                    }
                }
            })
         
        </script>





	</body>
</html>


